<template>
  <view class="index-page">
    <my-swiper :list="noticeList" v-if="noticeList.length > 0"></my-swiper>
    <view class="">
      <view class="b-w content-list">
        <u-search
          placeholder="请输入关键词搜索"
          v-model="keyword"
          @clear="clearSearch"
          @custom="searchList"
          @search="searchList"
        ></u-search>
        <view class="content-tabs">
          <u-tabs
            :list="tabs"
            :inactiveStyle="{ 'font-size': '30rpx' }"
            :activeStyle="{ 'font-size': '30rpx' }"
            @change="tabSwitch"
          ></u-tabs>
        </view>
        <view class="shadow-view"></view>
      </view>
      <view class="demand-list">
        <demand-list :list="list" :type="curTabId" :status="listLoading"></demand-list>
      </view>
    </view>
    <shop-footer ref="vShopFooter" currentUrl="/pages/index/index"></shop-footer>
  </view>
</template>

<script>
import demandList from './components/demandList.vue'
import mySwiper from './components/mySwiper.vue'
import shopFooter from '@/common/public/shop_footer'
export default {
  components: {
    demandList,
    mySwiper,
    shopFooter,
  },
  data() {
    return {
      listLoading: 'end',
      keyword: '',
      tabs: [
        {
          id: 1,
          name: '技术需求',
        },
        {
          id: 2,
          name: '技术供给',
        },
        {
          id: 3,
          name: '博士创新站',
        },
      ],
      curTabId: 1,
      noticeList: [],
      list: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
    }
  },
  onShareAppMessage(res) {
    return {
      title: '福建省博士创新站', //分享内容
      desc: '福建省博士创新站',
      path: 'pages/index/index', //分享地址
    }
  },
  onLoad(e) {
    this.getEnterpriseList()
    this.getNoticeList()
  },
  onShow() {
    if (this.list.length) {
      this.refreshList()
    }
  },
  onReachBottom() {
    // 下一页
    let totalPageNo = Math.ceil(this.total / this.pageSize)
    if (this.pageNo < totalPageNo) {
      ++this.pageNo
      if (this.curTabId === 1) {
        this.getEnterpriseList()
      } else if (this.curTabId === 2) {
        this.getProfessionalList()
      } else {
        this.getMatchList()
      }
    }
  },
  methods: {
    refreshList() {
      this.pageNo = 1
      const curTabId = this.curTabId
      curTabId === 1
        ? this.getEnterpriseList()
        : curTabId === 2
        ? this.getProfessionalList()
        : this.getMatchList()
    },
    // 获取公告列表
    getNoticeList() {
      this.$request('/home/homeNoticeList', {}).then((res) => {
        this.noticeList = res.result
      })
    },
    // 企业需求列表
    getEnterpriseList(e) {
      this.listLoading = 'loading'
      this.$request('/home/homeEnterprisePublishApplyPage', {
        keyword: this.keyword,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }).then((res) => {
        if (this.pageNo === 1) this.list = []
        this.list = [...this.list, ...res.result.records]
        this.total = res.result.total
        this.listLoading = 'end'
      })
    },
    // 专家列表
    getProfessionalList(e) {
      this.listLoading = 'loading'
      this.$request('/home/homeProfessionalPage', {
        keyword: this.keyword,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }).then((res) => {
        if (this.pageNo === 1) this.list = []
        this.list = [...this.list, ...res.result.records]
        this.total = res.result.total
        this.listLoading = 'end'
      })
    },
    // 建站列表
    getMatchList(e) {
      this.listLoading = 'loading'
      this.$request('/home/homeTalentMatchPage', {
        keyword: this.keyword,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }).then((res) => {
        if (this.pageNo === 1) this.list = []
        this.list = [...this.list, ...res.result.records]
        this.total = res.result.total
        this.listLoading = 'end'
      })
    },
    tabSwitch(e) {
      this.curTabId = e.id
      this.keyword = ''
      this.pageNo = 1
      this.pageSize = 10
      e.id === 1
        ? this.getEnterpriseList()
        : e.id === 2
        ? this.getProfessionalList()
        : this.getMatchList()
    },
    searchList(e) {
      this.keyword = e
      this.pageNo = 1
      this.pageSize = 10
      this.curTabId === 1
        ? this.getEnterpriseList()
        : this.curTabId === 2
        ? this.getProfessionalList()
        : this.getMatchList()
    },
    clearSearch() {
      this.keyword = ''
      this.pageNo = 1
      this.pageSize = 10
      this.curTabId === 1
        ? this.getEnterpriseList()
        : this.curTabId === 2
        ? this.getProfessionalList()
        : this.getMatchList()
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  touch-action: none;
  touch-action: pan-y;
}
.index-page {
  padding: 0 20rpx 100rpx 20rpx;
  margin-top: 20rpx;
}

.shadow-view {
  height: 50rpx;
  width: 710rpx;
  position: absolute;
  left: 0rpx;
  bottom: -50rpx;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.content {
  background-color: #f4f4f4;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  // overflow-y:scroll;
  // min-height: 200vh;
}
.demand-list {
  padding-top: 20rpx;
}

.main {
}

.uni-layer {
  width: 70%;
  position: fixed;
  left: 15%;
  margin-top: -400rpx;
  z-index: 1000;
}

.uni-mask {
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
}

.gif-btn {
  width: 120px;
  height: 120px;
  background-repeat: no-repeat;
  // animation: myAnimation 2.00s steps(1) infinite;
  background-size: 100% 100%;
  display: inline-block;
  position: fixed;
  bottom: 378rpx;
  right: 18rpx;
  z-index: 10;
  transform-origin: right bottom;
  margin-bottom: env(safe-area-inset-bottom);
}

.goods-history {
  width: 88rpx;
  height: 88rpx;
  background-image: url('https://resource.migudm.cn/group1/M00/D1/C8/oYYBAGQhgVqAZ0inAAAG7E-mxjk404.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: fixed;
  bottom: 250rpx;
  right: 30rpx;
  z-index: 10;
  margin-bottom: env(safe-area-inset-bottom);
}

@keyframes myAnimation {
  0% {
    background-position: 0px 0px;
  }

  2.04% {
    background-position: -115px 0px;
  }

  4.08% {
    background-position: -230px 0px;
  }

  6.12% {
    background-position: -345px 0px;
  }

  8.16% {
    background-position: -460px 0px;
  }

  10.20% {
    background-position: -575px 0px;
  }

  12.24% {
    background-position: -690px 0px;
  }

  14.29% {
    background-position: -805px 0px;
  }

  16.33% {
    background-position: -920px 0px;
  }

  18.37% {
    background-position: -1035px 0px;
  }

  20.41% {
    background-position: -1150px 0px;
  }

  22.45% {
    background-position: -1265px 0px;
  }

  24.49% {
    background-position: -1380px 0px;
  }

  26.53% {
    background-position: -1495px 0px;
  }

  28.57% {
    background-position: -1610px 0px;
  }

  30.61% {
    background-position: -1725px 0px;
  }

  32.65% {
    background-position: -1840px 0px;
  }

  34.69% {
    background-position: -1955px 0px;
  }

  36.73% {
    background-position: -2070px 0px;
  }

  38.78% {
    background-position: -2185px 0px;
  }

  40.82% {
    background-position: -2300px 0px;
  }

  42.86% {
    background-position: -2415px 0px;
  }

  44.90% {
    background-position: -2530px 0px;
  }

  46.94% {
    background-position: -2645px 0px;
  }

  48.98% {
    background-position: -2760px 0px;
  }

  51.02% {
    background-position: -2875px 0px;
  }

  53.06% {
    background-position: -2990px 0px;
  }

  55.10% {
    background-position: -3105px 0px;
  }

  57.14% {
    background-position: -3220px 0px;
  }

  59.18% {
    background-position: -3335px 0px;
  }

  61.22% {
    background-position: -3450px 0px;
  }

  63.27% {
    background-position: -3565px 0px;
  }

  65.31% {
    background-position: -3680px 0px;
  }

  67.35% {
    background-position: -3795px 0px;
  }

  69.39% {
    background-position: -3910px 0px;
  }

  71.43% {
    background-position: -4025px 0px;
  }

  73.47% {
    background-position: -4140px 0px;
  }

  75.51% {
    background-position: -4255px 0px;
  }

  77.55% {
    background-position: -4370px 0px;
  }

  79.59% {
    background-position: -4485px 0px;
  }

  81.63% {
    background-position: -4600px 0px;
  }

  83.67% {
    background-position: -4715px 0px;
  }

  85.71% {
    background-position: -4830px 0px;
  }

  87.76% {
    background-position: -4945px 0px;
  }

  89.80% {
    background-position: -5060px 0px;
  }

  91.84% {
    background-position: -5175px 0px;
  }

  93.88% {
    background-position: -5290px 0px;
  }

  95.92% {
    background-position: -5405px 0px;
  }

  97.96% {
    background-position: -5520px 0px;
  }

  100.00% {
    background-position: -5635px 0px;
  }
}
.content-list {
  margin-top: 20rpx;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;
  padding-bottom: 0rpx;
  position: relative;
  .content-tabs {
    margin-top: 20rpx;
  }
}
</style>
